<template>
  <ConfigProvider>
    <RouterView />
    <div class="loading" v-if="showLoading">
      <div class="loading_merge"></div>
      <van-loading class="load_icon" color="#1989fa" />
    </div>
  </ConfigProvider>
</template>

<script setup lang="ts">
import { ConfigProvider } from "vant";
const showLoading = ref(false)

</script>

<style lang="scss" scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  overflow: hidden;
  transition: filter 300ms;
  will-change: filter;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.loading {
  height: 100vh;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  .loading_merge{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgba($color: #000000, $alpha: 0.6)
  }
}
</style>
